一般使用
// JS 必須看見等於後方才知道 是什麼類型
let male = 'string'
let hight = 175
function run (){ console.log('running') }
function say(name) => `My name is ${name}`
let obj = { baby: 'Mark' }
let arr = ['banana','apply']
let objInArr = [{ name:'banana' }]
let boo = true
// TS 定義類型
let male: string = 'string'
let hight: number = 175
function run(): void { console.log('running') } // void 無回傳使用 'undefined'
function say(name: string): string => `My name is ${name}`
let obj: { baby: string } = { baby: 'Mark' }
let arr: string[] = ['banana','apply']
let objInArr: { name: string }[] = [{ name:'banana' }]
let boo: boolean = true
定義Type
定義介接接口的時候最常使用就是定義Type。
type PersonalInfo = {
name: string
nikeName: string
hight: number
wight: number
}
function about(info: PersonalInfo): string => `My Name is ${info.name}, nikename is ${info.nikeName}, wight/hight is ${info.wight}/${info.hight}`
蠻常使用在專案內使用非同步
定義 Promise & async/await Function
// 簡單的 Promise Function
let promiseExample = (): Promise<string> => new Promise((res,rej) => res('Hello'))
// 簡單的 async/await
async function asyncFunc(text: string): Promise<string> {
return new Promise ((res,rej)=> res(text))
}
? 、 any 、 string|number 使用
前面這兩種的讓TS彈性很高， 後面 | 的這種寫法也可以擴展限制格式
// ? 使用
function example1(name?: string): void {
if(name) {console.log(`name: ${name}`)}
else {console.log(`no name`)}
}
example1('test') // output: `name: test`
example1() // output: `no name`
// any 使用
function example2(something: any): any { return something }
example2() // output: undefined
example2('test') // output: 'test'
example2(1) // output: 1
example3({test:''}) // output: {test:''}
// | 使用
function example3(something: string|number): any { return something }
example3() // output: error
example3('test') // output: 'test'
example3(1) // output: 1
example3({test:''}) // output: error
結語
TypeScript 拓展定義Type這塊我覺得蠻簡單上手且很好理解，剛開始會覺得怎麼這麼瑣碎，但也沒有測試來的瑣碎，我覺得定義Type之後交接也比較清楚定義了什麼東西。