Learn TypeScript in 50 Minutes — Tutorial for Beginners
Sep 4, 2018 · 6 min read
跟著練習
- 確定環境已安裝npm
node -v2. 安裝npm TypeScript
npm install -g typescript3. 使用VSC 寫一個 typescript檔,存成 main.ts

let message = ‘Hello World’;
console.log(message);4. 在 VSC的終端機輸入 tsc main.ts 轉出 main.js 檔
5. 無需使用 browser,可以使用node來看結果,輸入 node main.js 即可
6. 自動編譯且顯示
tsc main --watch宣告
let x = 10;
const y = 20;// 不能重覆宣告同個變數名稱
// let x = 30 // error
// 宣告時可以不給值
let sum;
// const 宣告時必須給值
const title = 'Codevoluation';
let 宣告帶型別
let isBeginner: boolean = true;
et total: number = 0;
let name: string = 'Vishwas';字串帶參數,用`包著
let sentence: string = `My name is ${name}
I am a beginner in Typescript`;
console.log(sentence);宣告帶型別
let n: null = null;
let u: undefined = undefined;let isNew: boolean = null;
let myName: string = undefined;
陣列與元組(?)
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];
let person1: [string, number] = ['Chris', 22];列舉
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
console.log(c);any 型態
let randomValue: any = 10;
randomValue = true;
randomValue = 'Vishwas';any 與 unknow 型態
let myVariable: any = 10;
console.log(myVariable.name);
myVariable();
myVariable.toUpperCase();let myVariable2: unknown = 10;
(myVariable2 as string).toUpperCase();let myVariable3: unknown = 10;
function hasName(obj:any):obj is {name: string} {
return !!obj && typeof obj === "object" && "name" in obj
}
if (hasName(myVariable3)) {
console.log(myVariable3.name);
}
(myVariable3 as string).toUpperCase();
在宣告時如果不給型別,可以任意賦值;如果宣告時給了型別,就不能任意給不符合型別的值。
下圖的b有error

多重型別
使用 anyType 不會有IntelliSense
let multiType: number | boolean;
multiType = 20;
multiType = true;let anyType: any;
anyType = 20;


function 帶參數
function add(num1:number, num2:number) {
return num1 + num2;
}
add(5,10);function 帶 optional 參數,optional 的 parameter 要放在後面
function add(num1:number, num2?:number) {
if (num2)
return num1 + num2;
else
return num1;
}
add(5);function 參數帶預設值
function add(num1:number, num2:number = 10) {
if (num2)
return num1 + num2;
else
return num1;
}
add(5);interface
interface Person {
firstName: string;
lastName: string;
}//function fullName(person: {firstName: string, lastName: string}) {
function fullName(person: Person) {
console.log(`${person.firstName} ${person.lastName}`);
}let p = {
firstName: 'Bruce',
lastName: 'Wayne'
};fullName(p);
class
class Employee {
protected employeeName: string; constructor(name: string) {
this.employeeName = name;
} greet() {
console.log(`Good Morning ${this.employeeName}`);
}}let emp1 = new Employee('Vishwas');
//console.log(emp1.employeeName);
emp1.greet();// extend
class Manager extends Employee {
constructor(managerName: string) {
super(managerName);
}
delegateWork() {
console.log(`Manager delegating tasks ${this.employeeName}`);
}
}let m1 = new Manager('Bruce');
m1.delegateWork();
m1.greet();
//console.log(m1.employeeName);
