Day 05 - TypeScript 语法

字串 string / 数字 number

let userName: string; // 将变数用 : 宣告型别
userName = 'Sharon';

let userAge: number = 18; // 直接赋值

物件 {}

选填 ?: 非必填

const person: { name: string, age: number, address?: string } = {
    name = 'Sharon',
    age = 18,
};

阵列 string[] / number[]

const color: string[] = ['red', 'blue', 'pink'];
const luckyNumber: number[] = [13, 7, 9, 0];

泛型 Array

跟上面相同

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)

函式:number → 有回传值,解构赋植

const add = ({ x, y }: {x: number, y: number}): number => {
    return x + y;
}

函式:void → 没有回传值

const add = ({ x, y }: { x: number, y: number}): void => {
    console.log(x + y);
}

函式:never → 不会执行完成

const add = (x: number, y: number): never => {
  throw new Error('This is never');
};

add(3, 5);

undefined null

let foo: undefined;
let bar: null;

literal type: 定死某值 → 有常数 const 的感觉

let occupation: 'Programmer'; -> 强制是某值(?)
occupation = 'Programmer';

literal type[3],可以是字串或数值,并且经常会搭配联集(|)来使用:

这时候 brand 这个变数的值就只能是这三个字串中的其中一种,否则都会报错。

let brand: 'iphone' | 'samsung' | 'sony';

TypeScript 会自己推论型别,不用所有变数都主动定义型别

在开发者没有主动定义变数型别的情况下,TypeScript 会自动去对变数进行型别推论,并以此作为该变数的型别

const greet = 'Hello TypeScript';
// 因为使用 const 时,TS 会推论它为一个 literal type

let greet = 'Hello TypeScript';
// 则会推论是 string,所以之後值改变了,也只能是 string

抽象化:使用型别化名(type alias)→ 将重复的型别定义成一个变数

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',
};

抽象化:使用介面(interface)→ 以定义的型别当基础,再拓展定义型别

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: 任何型别

any 是 TypeScript 内建的一个型别,基本上 any 表示的就是「什麽都可以」
有些时候真的无法确定会得到什麽样的结果,例如 JSON.parse() 这个方法的回传值就会定义为 any
但在实际的开发过程中,应该要尽可能避免去使用 any

const Link = (props: { content: string }) => {
  const { content } = props;
  return (
    // ...
   )
}

<<:  【Day20】浅层复制及深层复制

>>:  Day 05 : 来点不一样的 Two Sum

[Day18] Unreal Webcam Fun

[Day18] Unreal Webcam Fun 需要用到的技巧与练习目标 MediaDevice...

[Day31] 第三十一课 Azure资讯安全中心-1

疑,怎麽又出现了,因为对於之前挖的坑,总是想要把他填上,所以又出现了 今天想要谈一下Azure资讯安...

接API

缘由: 接API大概是在科技业的面试时最常问的问题了吧,但老实说资料的复杂性能不能接得正确好像才是关...

[NestJS 带你飞!] DAY11 - Middleware

什麽是 Middleware? Middleware 是一种执行於路由处理之前的函式,可以存取请求物...

突破自我设限

前言 今天聊「突破自我设限」,经过前面 20 几天,多数概念已经建构得差不多,是该来总览与整合。有时...