Learn TypeScript in 50 Minutes — Tutorial for Beginners

Aya Wong
Aya Wong
Sep 4, 2018 · 6 min read

跟著練習

  1. 確定環境已安裝npm
node -v

2. 安裝npm TypeScript

npm install -g typescript

3. 使用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);
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade