typescript
install
- npm install -g typescript
Compile
- tsc helloworld.ts
kate
https://github.com/PrettyFlower/KateTypeScriptSyntaxHighlighting
wget https://github.com/PrettyFlower/KateTypeScriptSyntaxHighlighting/raw/master/typescript.xml cp typescript.xml /usr/share/apps/katepart/syntax/typescript.xml
With let keyword added
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE language SYSTEM "language.dtd">
3 <language name="TypeScript" section="Scripts" extensions="*.ts;"
4 indenter="cstyle" author="PrettyFlower (abigchode@gmail.com)">
5 <highlighting>
6 <list name="keywords">
7 <item> if </item>
8 <item> else </item>
9 <item> for </item>
10 <item> in </item>
11 <item> while </item>
12 <item> do </item>
13 <item> continue </item>
14 <item> break </item>
15 <item> with </item>
16 <item> try </item>
17 <item> catch </item>
18 <item> finally </item>
19 <item> switch </item>
20 <item> case </item>
21 <item> new </item>
22 <item> var </item>
23 <item> function </item>
24 <item> return </item>
25 <item> delete </item>
26 <item> true </item>
27 <item> false </item>
28 <item> void </item>
29 <item> throw </item>
30 <item> typeof </item>
31 <item> const </item>
32 <item> default </item>
33 <item> this </item>
34 <item> null </item>
35 <item> undefined </item>
36
37 <item> class </item>
38 <item> export </item>
39 <item> declare </item>
40 <item> module </item>
41 <item> import </item>
42 <item> static </item>
43 <item> interface </item>
44 <item> implements </item>
45 <item> constructor </item>
46 <item> public </item>
47 <item> private </item>
48 <item> string </item>
49 <item> number </item>
50 <item> bool </item>
51 <item> any </item>
52 <item> extends </item>
53 <item> let </item>
54 </list>
55
56 <contexts>
57 <context attribute="Normal Text" lineEndContext="#stay" name="Normal">
58 <DetectSpaces/>
59 <keyword attribute="Keyword" context="#stay" String="keywords"/>
60 <DetectChar attribute="String" context="String" char="""/>
61 <DetectChar attribute="String Char" context="String 1" char="'"/>
62 <StringDetect attribute="Reference" context="Reference" String="///" />
63 <Detect2Chars attribute="Comment" context="Comment" char="/" char1="/"/>
64 <Detect2Chars attribute="Comment" context="Multi/inline Comment" char="/" char1="*" beginRegion="Comment"/>
65 <DetectIdentifier/>
66 </context>
67
68 <context attribute="String" lineEndContext="#pop" name="String">
69 <DetectIdentifier/>
70 <HlCStringChar attribute="String Char" context="#stay"/>
71 <LineContinue attribute="String" context="#stay"/>
72 <DetectChar attribute="String" context="#pop" char="""/>
73 </context>
74
75 <context attribute="String Char" lineEndContext="#pop" name="String 1">
76 <DetectIdentifier/>
77 <HlCStringChar attribute="String Char" context="#stay"/>
78 <LineContinue attribute="String" context="#stay"/>
79 <DetectChar attribute="String Char" context="#pop" char="'"/>
80 </context>
81
82 <context attribute="Comment" lineEndContext="#pop" name="Comment">
83 <DetectSpaces />
84 <IncludeRules context="##Alerts" />
85 <DetectIdentifier />
86 </context>
87
88 <context attribute="Comment" lineEndContext="#stay" name="Multi/inline Comment">
89 <IncludeRules context="##Alerts" />
90 <Detect2Chars attribute="Comment" context="#pop" char="*" char1="/" endRegion="Comment"/>
91 </context>
92
93 <context attribute="Reference" lineEndContext="#pop" name="Reference">
94 <DetectChar attribute="ReferenceBracket" context="#stay" char="<"/>
95 <DetectChar attribute="ReferenceBracket" context="#stay" char=">"/>
96 <DetectChar attribute="ReferenceFile" context="ReferenceFile" char="""/>
97 <DetectChar attribute="ReferenceFile" context="ReferenceFile 1" char="'"/>
98 </context>
99
100 <context attribute="ReferenceFile" lineEndContext="#pop" name="ReferenceFile">
101 <DetectIdentifier/>
102 <HlCStringChar attribute="ReferenceFile" context="#stay"/>
103 <LineContinue attribute="ReferenceFile" context="#stay"/>
104 <DetectChar attribute="ReferenceFile" context="#pop" char="""/>
105 </context>
106
107 <context attribute="ReferenceFile" lineEndContext="#pop" name="ReferenceFile 1">
108 <DetectIdentifier/>
109 <HlCStringChar attribute="ReferenceFile" context="#stay"/>
110 <LineContinue attribute="ReferenceFile" context="#stay"/>
111 <DetectChar attribute="ReferenceFile" context="#pop" char="'"/>
112 </context>
113 </contexts>
114 <itemDatas>
115 <itemData name="Normal Text" defStyleNum="dsNormal"/>
116 <itemData name="Keyword" defStyleNum="dsNormal" color="#00f"/>
117 <itemData name="Char" defStyleNum="dsChar"/>
118 <itemData name="String" defStyleNum="dsString" color="#a31515"/>
119 <itemData name="String Char" defStyleNum="dsString" color="#a31515"/>
120 <itemData name="Comment" defStyleNum="dsNormal" italic="true" color="#080"/>
121 <itemData name="Reference" defStyleNum="dsNormal" color="#aeb9ae"/>
122 <itemData name="ReferenceBracket" defStyleNum="dsNormal" color="#708870" bold="true"/>
123 <itemData name="ReferenceFile" defStyleNum="dsNormal" color="#2c51cc"/>
124 </itemDatas>
125 </highlighting>
126 <general>
127 <comments>
128 <comment name="singleLine" start="//" />
129 <comment name="multiLine" start="/*" end="*/" />
130 </comments>
131 <keywords casesensitive="1"/>
132 </general>
133 </language>
Sample code typescript for browser
greeter.html
lib.ts
Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export keyword.
export function getText(){
return "text";
}
greeter.ts
- import {xyz} from "module";
import {getText} from "./lib";
interface Person {
firstName: string;
lastName: string;
}
function greeterPerson(p:Person) {
return "Hello GP, " + p.firstName + ' ' + p.lastName + ' ' + getText() ;
}
function greeter(person:string) {
return "Hello, " + person;
}
var user = "XPTO User";
//document.body.innerHTML = greeter(user);
document.body.innerHTML = greeterPerson(
{firstName:"First",lastName:"Last"}
);
tsconfig.json
webpack.config.js
build
ReactJS + typescript example
webpack.config.js
var path = require('path');
module.exports = {
entry: {main:'./greeter.js'},
resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode:"development"
};
tsconfig.json
{
"compilerOptions": {
"module": "es2015",
"target": "es5",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"jsx": "react"
}
/*, "files": [ "greeter.tsx", "lib.ts","App.tsx"] */
}
lib.ts
function getText() {
return "text";
}
interface Person {
firstName: string;
lastName: string;
}
function greeterPerson(p:Person) {
return "Hello GP, " + p.firstName + ' ' + p.lastName + ' ' + getText() ;
}
function greeter(person:string) {
return "Hello, " + person;
}
interface HumanInterface {
name: string;
getName(): void;
}
class Human implements HumanInterface{
name: string;
constructor(name: string) {
this.name = name;
}
getName() {
return "My name is " + this.name;
}
}
export {greeter, greeterPerson, Human, HumanInterface , Person, getText}
greeter.html
<!DOCTYPE html>
<html>
<head><title>React + typescript test</title><meta charset="UTF-8"></head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
package.json
App.tsx
import React from 'react';
import {Person,greeterPerson,Human,HumanInterface} from './lib';
import NameHolder from './NameHolder';
interface MyState {
currDate: string;
greetings: string;
human: HumanInterface;
}
function createMyState( currDate: string, greetings: string, human: HumanInterface) : MyState {
return {currDate:currDate, greetings:greetings, human: human};
}
interface MyProps {
prop:string;
}
export default class App extends React.Component<MyProps, MyState> {
text: string;
timerID: number;
constructor(props: MyProps) {
super(props);
this.text=this.props.prop;
this.state= createMyState("waiting for date","waiting for greetings",null); // init with MyState format
}
public static createHuman(name:string) : HumanInterface {
return new Human(name);
}
public tickHandler() {
let cd = new Date().toString();
let greetings = greeterPerson({firstName:"first",lastName:"last"});
let human:HumanInterface = App.createHuman("JohnDoe");
this.setState( createMyState(cd, greetings, human) );
}
componentDidMount() {
// called after the 1st render !
console.log("First render");
this.timerID = setInterval(this.tickHandler.bind(this), 1000);
}
componentWillUnmount() {
// component will be destroyed
console.log("Will be destroyed soon");
clearInterval(this.timerID);
}
public render() {
// do not call set state in render !
return (
<div>
<p>Hello World!!! -- {this.text} -- {this.state.greetings}</p>
<p>Human { this.state.human!=null ? this.state.human.getName() : "" } {this.state.currDate} </p>
<p> <NameHolder attr="holding..." /> </p>
<p> <NameHolder attr={this.state.currDate} /> </p>
<div> {this.props.children} </div>
</div>
);
}
}
greeter.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {getText} from "./lib";
import App from './App'; // uses App.tsx
import NameHolder from './NameHolder';
console.log("Entry point");
let appContainer = document.getElementById('app') ;
let markup = <App prop="Other text inside the page"> <NameHolder attr="NameHolder child inside App "/> </App>;
ReactDOM.render( markup , appContainer);
NameHolder.tsx
import React from 'react';
// Component properties (XML attributes)
interface NameHolderProperties {
attr: string;
}
interface NameHolderState {
attr: string;
}
// properties and state
export default class NameHolder extends React.Component<NameHolderProperties, NameHolderState> {
constructor(props:NameHolderProperties){
super(props); // populates the this.props
this.state={attr:this.props.attr};
}
public render() {
return <span>!!!{this.state.attr}!!!</span>;
}
}