let userName: string; // 将变数用 : 宣告型别
userName = 'Sharon';
let userAge: number = 18; // 直接赋值
选填 ?: 非必填
const person: { name: string, age: number, address?: string } = {
name = 'Sharon',
age = 18,
};
const color: string[] = ['red', 'blue', 'pink'];
const luckyNumber: number[] = [13, 7, 9, 0];
跟上面相同
const luckyNumber: Array<number> = [13, 7, 9, 0];
const luckyItem: (string | number)[] = [1, 3, 5, 'S'];
const luckyItem: Array<string | number> = [1, 3, 5, 'S'];
const add = (x: number, y: number ): number => {
return x + y;
}
add(3, 8)
const add = ({ x, y }: {x: number, y: number}): number => {
return x + y;
}
const add = ({ x, y }: { x: number, y: number}): void => {
console.log(x + y);
}
const add = (x: number, y: number): never => {
throw new Error('This is never');
};
add(3, 5);
let foo: undefined;
let bar: null;
let occupation: 'Programmer'; -> 强制是某值(?)
occupation = 'Programmer';
literal type[3],可以是字串或数值,并且经常会搭配联集(|)来使用:
这时候 brand 这个变数的值就只能是这三个字串中的其中一种,否则都会报错。
let brand: 'iphone' | 'samsung' | 'sony';
在开发者没有主动定义变数型别的情况下,TypeScript 会自动去对变数进行型别推论,并以此作为该变数的型别
const greet = 'Hello TypeScript';
// 因为使用 const 时,TS 会推论它为一个 literal type
let greet = 'Hello TypeScript';
// 则会推论是 string,所以之後值改变了,也只能是 string
const book1: {
name: string,
price: number,
} = {
name: 'book1',
price: 99,
};
const book2: {
name: string,
price: number,
} = {
name: 'book2',
price: 999,
};
type Book = {
name: string;
price: number;
};
// 在 : 後放入的是命名过的型别
const book1: Book = {
name: 'Learn TypeScript',
price: 300,
};
type Book = {
author: string;
publishedAt: string;
};
type Device = {
brand: string;
releasedAt: string;
};
type Product = Book | Device;
// book 这个变数符合 Product Type,
// 因为只要符合 Book Type 或 Device Type 其中之一即可符合 Product Type
const book: Product = {
author: 'pjchender',
publishedAt: '20200831',
};
type Software = {
platform: string;
releasedAt: string;
};
type Hardware = {
RAM: string;
CPU: string;
};
type MobilePhone = Software & Hardware;
// 要符合 MobilePhone 这个型别的话,Software 和 Hardware 中的任何一个属性都不能少。
const iphone11: MobilePhone = {
platform: 'ios',
releasedAt: '20190919',
RAM: '4GB',
CPU: 'A13',
};
Type Alias 和 Interface 基本上是不同的概念,虽然有时可以达到类似的效果。一般来说,若是要在 React 中定义 props 或 state 的型别时,惯例上会使用 Type Alias;当若某个元件是要开发给其他人使用到的套件,则这个元件中的 API 会建议使用 Interface,让使用此套件的开发者更方便奠基在你提供的方法上再添加其他属性。
interface Hardware {
RAM: string;
CPU: string;
}
interface Software {
platform: string;
releasedAt: string;
}
interface MobilePhone extends Software, Hardware {
price: number;
brand: string;
}
const iphone11: MobilePhone = {
price: 24900,
brand: 'apple',
platform: 'ios',
releasedAt: '20190919',
RAM: '4GB',
CPU: 'A13',
};
any 是 TypeScript 内建的一个型别,基本上 any 表示的就是「什麽都可以」
有些时候真的无法确定会得到什麽样的结果,例如 JSON.parse() 这个方法的回传值就会定义为 any
但在实际的开发过程中,应该要尽可能避免去使用 any
const Link = (props: { content: string }) => {
const { content } = props;
return (
// ...
)
}
[Day18] Unreal Webcam Fun 需要用到的技巧与练习目标 MediaDevice...
疑,怎麽又出现了,因为对於之前挖的坑,总是想要把他填上,所以又出现了 今天想要谈一下Azure资讯安...
缘由: 接API大概是在科技业的面试时最常问的问题了吧,但老实说资料的复杂性能不能接得正确好像才是关...
什麽是 Middleware? Middleware 是一种执行於路由处理之前的函式,可以存取请求物...
前言 今天聊「突破自我设限」,经过前面 20 几天,多数概念已经建构得差不多,是该来总览与整合。有时...