寫了3個月TypeScript，我學到了什麼？
原文連接:TypeScript入門css
以前閱讀vue源碼的時候發現有TypeScript，一臉懵逼，所以須要入個門。html
最近在新環境的平常工做中也須要用到TypeScript，學習過程當中遇到一些疑惑，作了記錄。前端
我的以爲仍是比較適合TypeScript入門的同窗閱讀的，由於我遇到的這些疑惑，可能你也會遇到。vue
- ts類型中的?，<>意思是什麼？
- 什麼是duck typing？
- constructor以前的變量定義是什麼？
- declare是什麼？
- ts中unknown, void, null和undefined，never區別是什麼？
- ts中的泛型約束是什麼？
- 數組類型的兩種定義方式
- ts中的類型斷言
- 泛型函數與泛型接口
- 如何理解as const？
- declare global是什麼意思？
- 如何在TypeScript環境增長一個全局變量?
- interface能夠繼承嗎？
- typescript中的&是什麼意思?
- interface與type的區別是什麼？
- enum做爲一種類型是什麼意思？
- 項目中xxx.d.ts的declare module '*.scss'是什麼意思？
declare module還能夠作什麼？ - typescript如何約束Promise的類型？
- typescript中的keyof如何使用？
- typescript中的typeof如何使用？
- typescript中的
non-null operator是什麼？
ts類型中的?意思是什麼？
// https://github.com/vuejs/vue/blob/dev/src/core/observer/watcher.js before: ?Function; options?: ?Object,
這是ts的interface中的一個概念。ts的interface就是"duck typing"或者"structural subtyping"，類型檢查主要關注the shape that values have。所以咱們先來熟悉一下interface，再引出?的解釋。java
TypeScript普通方式定義函數：
function print(obj: {label: string}) {
console.log(obj.label);
}
let foo = {size: 10, label: "這是foo, 10斤"};
print(foo);
TypeScript interface方式定義函數：
interface labelInterface {
label: string;
}
function print(obj: labelInterface) {
console.log(obj.label);
}
let foo = {size: 10, label: "這是foo, 10斤"};
print(foo);
進入正題，TypeScript中的？是什麼意思？Optional Properties。node
Optional Properties
- 並非interface中的全部屬性都是required的，一些存在特定條件下，一些根本不存在。
- Optional Properties適用於"option bags"的設計模式，這種設計模式意思是：咱們傳遞一個對象到函數，這個函數只有幾個屬性，沒有其餘更多的屬性。
Optional Property的好處在於，清晰的看清楚有哪些屬性，防止傳入不屬於該interface的屬性。python
interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare = {color: "white", area: 100}; if (config.clor) { // Error: Property 'clor' does not exist on type 'SquareConfig' newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; } let mySquare = createSquare({color: "black"});Interfaces with optional properties are written similar to other interfaces, with each optional property denoted by a ? at the end of the property name in the declaration.
什麼是?和Optional Properties呢？interface的某些非required屬性名的末尾，添加?這是一個optional property，其實就是字面意思，條件屬性。react
Optional Property只是屬性名，也就是options?: ?Object,中options後的問號，拿屬性值類型前的問號是什麼意思，也就是?Object，是什麼意思？
此處的問號表明屬性值類型是否能夠是null類型，可是隻有strictNullChecks爲on時，值類型才能爲null。git
/**
* @type {?number}
* strictNullChecks: true -- number | null
* strictNullChecks: off -- number
* */
var nullable;
咱們的例子中，options?:?Object的意思是options的值類型能夠是Object，null（僅在strictNullChecks爲true時容許）。es6
ts類型中的<>什麼意思？
deps: Array<Dep>a newDeps: Array<Dep>
ts中的數組類型與java中的定義相似:
let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];
什麼是duck typing?
duck test。若是"走路像鴨子，叫聲像鴨子，那麼這就是鴨子"。
在computer programming，用於'判斷對象是否能夠按照預期的目的使用'。
一般的typing中，適用性取決於對象的type。duck typing不同，對象的適用性取決於指定method或property的存在與否，而不是取決於對象自身的類型。
前端工程師基本都是duck typing，由於JavaScript沒有type。 --這話是我說的
Python3 example
class Duck:
def fly(self):
print("Duck flying")
class Airplane:
def fly(self):
print("Airplane flying")
class Whale:
def swim(self):
print("Whale swimming")
def lift_off(entity):
entity.fly()
duck = Duck()
airplane = Airplane()
whale = Whale()
lift_off(duck) # prints `Duck flying`
lift_off(airplane) # prints `Airplane flying`
lift_off(whale) # Throws the error `'Whale' object has no attribute 'fly'`
Javascript example
class Duck {
fly() {
console.log("Duck flying")
}
}
class Airplane {
fly() {
console.log("Airplane flying")
}
}
class Whale {
swim() {
console.log("Whale swimming")
}
}
function liftOff(entity) {
entity.fly()
}
const duck = new Duck();
const airplane = new Airplane();
const whale = new Whale();
liftOff(duck); // Duck flying
liftOff(airplane); // Airplane flying
liftOff(whale); // Uncaught TypeError: entity.fly is not a function
constructor以前的變量定義是什麼？
例如vnode的定義：
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void; // rendered in this component's scope
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
componentInstance: Component | void; // component instance
parent: VNode | void; // component placeholder node
// strictly internal
raw: boolean; // contains raw HTML? (server only)
isStatic: boolean; // hoisted static node
isRootInsert: boolean; // necessary for enter transition check
isComment: boolean; // empty comment placeholder?
isCloned: boolean; // is a cloned node?
isOnce: boolean; // is a v-once node?
asyncFactory: Function | void; // async component factory function
asyncMeta: Object | void;
isAsyncPlaceholder: boolean;
ssrContext: Object | void;
fnContext: Component | void; // real context vm for functional nodes
fnOptions: ?ComponentOptions; // for SSR caching
fnScopeId: ?string; // functional scope id support
constructor ()
...
}
http://www.typescriptlang.org...
typeScript中的class要比es6的多一項：property。這和java或者c#中的一致。
property constructor method
實際上es6提供了一種私有變量，僅僅能在class內部訪問。
class Rectangle {
#height = 0;
#width;
constructor(height, width) {
this.#height = height;
this.#width = width;
}
}
冒號後面的:VNode什麼意思？
export function cloneVNode (vnode: VNode): VNode {
...
}
TypeScript中的函數返回值類型。
declare是什麼？
聲明這是一個definition。
- declare是ts中用於寫定義文件的關鍵字。
- declare能夠定義全局變量，全局函數，全局命名空間，class等等。
declare能夠按照下面這樣去使用：
declare var foo:number; declare function greet(greeting: string): void; declare namespace myLib { function makeGreeting(s: string): string; let numberOfGreeting: number; } declare function getWidget(n: number): Widget; declare function getWidget(s: string): Widget[]; declare class Greeter { constructor(greeting: string); greeting: string; showGreeting(): void; }
ts中any，unknown, void, null和undefined，never區別是什麼？
null，undefined就是js中的意思。
any: 任意類型，謹慎使用，避免使typescript變成anyscript
unknown: 與any相似，可是比any更加安全
void: 一般用於返回值的函數
never：never occur 歷來不會發生的類型，例如永遠不會有結果的，拋出異常或者死循環。
ts中的泛型約束是什麼？
基於string（boolean, Function）類型
function loggingIdentity<T extends string>(arg: T): T {
console.log(arg.length);
return arg;
}
loggingIdentity("hello"); // 5
loggingIdentity(2); // Argument of type 'number' is not assignable to parameter of type 'string'.
基於自定義的interface
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // Now we know it has a .length property, so no more error
return arg;
}
loggingIdentity(3); // Error, number doesn't have a .length property
loggingIdentity({length: 10, value: 3}); // 10
ts2.8發佈說明
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html type TypeName<T> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends Function ? "function" : "object"; type T0 = TypeName<string>; // "string" type T1 = TypeName<"a">; // "string" type T2 = TypeName<true>; // "boolean" type T3 = TypeName<() => void>; // "function" type T4 = TypeName<string[]>; // "object"
同時支持type和interface兩種類型的泛型約束
interface reduxModel<T> {
reducers: T extends string ? {[x in T]: () => void}: T,
}
type TType = "foo" | "bar" | 'baz'
interface TInterface {
"foo": () => void,
"bar": () => void,
'baz': () => void
}
const ireducers = {
"foo": () => void
}
const model : reduxModel<TType> = {
reducers: ireducers
// 正常運行
}
const model : reduxModel<TInterface> = {
reducers: ireducers
// Type '{ foo: () => undefined; }' is missing the following properties from type 'TInterface': "bar", 'baz'
}
數組類型的兩種定義方式
Array<類型>
Array後面加一個<>，<>內聲明元素類型。
type Foo= Array<string>;
interface Bar {
baz: Array<{
name: string,
age: number,
}>
}
類型[]
元素類型後面加一個[]。
type Foo = string[]
interface Bar {
baz : {
name: string,
age: number,
}[]
}
ts中的類型斷言
TypeScript容許咱們覆蓋推斷和分析出的視圖類型爲咱們想要的任意方式，這種機制叫作類型斷言（Type Assertion），類型斷言會告訴編譯器你比它更加知道具體是哪一種類型，編譯器不用再二次推斷了。
類型斷言每每是發生在編譯器編譯期間，用於提示編譯器如何分析咱們的代碼。
- 語法
- 遷移js代碼
- 類型斷言的問題
- 指定event類型
- 慎用as any和as unknown
- type與類型斷言
語法
interface Foo {
name: string,
}
type Any = any;
let a:Foo = {} as Foo;
let a:Foo = {} as Any;
any是任意類型的子類型，因此任意類型均可以被as any，仍是建議謹慎使用，避免變爲anyscript。
遷移js代碼
var foo = {};
foo.bar = 123; // Error: property 'bar' does not exist on `{}`
foo.bas = 'hello'; // Error: property 'bas' does not exist on `{}`
interface Foo {
bar: number;
bas: string;
}
var foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello'; // 註釋掉這一行也不會報錯
類型斷言的問題
foo.bas = 'hello'; // 註釋掉這一行也不會報錯
若是是下面的方式就會報錯了，會提示缺乏bas的定義
interface Foo {
bar: number;
bas: string;
}
var foo : Foo= {
bar: 123
};
因此說，類型斷言是不夠嚴謹的，建議使用var foo : Foo這種方式。
指定event類型
function handler (event: Event) {
let mouseEvent = event as MouseEvent;
}
function handler(event: Event) {
let element = event as HTMLElement; // HTMLElement不是一個徹底的event子類型，所以不能充分重疊，須要加一個unknown或者any
}
二次斷言編譯提示取消：
function handler(event: Event) {
let element = event as unknown as HTMLElement; // Okay!
}
慎用as any和as unknown
一般狀況是類型斷言S和T的話，S爲T的子類型，或者T爲S的子類型，這種是相對安全的。
假如是用as any或者as unknown，是很是不安全的。慎用！慎用！
// 謹慎使用 as any as known
type與類型斷言
type keys = 'foo' | 'bar' | 'baz'，obj[key as keys]是什麼意思？
與variable:type相似，這是另一種類型約束。
若是不明白的花，看完下面這個demo就明白了。
type keys = 'foo' | 'bar' | 'baz'
const obj = {
foo: 'a',
bar: 'b',
baz: 'c'
}
const test = (key:any) => {
return obj[key] ; // 提示錯誤 type 'any' can't be used to index type '{ foo: string; bar: string; baz: string; }'.
}
如何解決這個報錯呢？
第一種方式：類型約束
const test = (key:keys) => {
return obj[key] ;
}
第二種方式：類型斷言（這種方式經常使用於第三方庫的callback，返回值類型沒有約束的狀況）
const test = (key:any) => {
return obj[key as keys] ;
}
須要注意：obj[key as keys]中keys的類型能夠少於obj的類型，反過來obj的屬性不能少於keys的類型。
泛型函數與泛型接口
泛型函數
想一想一個場景，咱們但願函數的輸入與輸出類型一致。
你可能會這樣作，但這並不能保障輸入與輸出類型一致。
function log(value: any):any {
return value;
}
經過泛型函數能夠精準實現：函數名後加一個<T>這裏的T能夠理解爲泛型的名字。指定輸入類型爲T，返回值爲T。
function log<T>(value: T):T {
return value;
}
這是一個泛型函數實例，如何定義一種泛型函數類型呢？
type Log = <T>(value: T) => T
使用泛型函數類型約束函數：
let log : Log = function <T>(value: T):T {
return value;
}
泛型接口
接口全部屬性靈活，輸入輸出一致便可。
interface Log {
<T>(value: T): T
}
let myLog: Log = log
myLog("s")// "s"
myLog(1)// 1
接口全部屬性必須爲同一類型。
interface Log<T> {
(value: T): T
}
let myLog: Log<string> = log
myLog("s")// "s"
myLog(1)// Error
ts中的<>
在ts中，遇到<>的話，尖括號中間大多狀況下都是類型。
Array<string><string>[]function <T>(value: T): T { ... }type MyType = <T>(value : T) => Tinterface MyInterface<T> { (value: T): T }
如何理解as const？
- 爲了解決let賦值問題的，將一個mutable的變量改成readonly。
- 避免將類型推斷爲聯合類型。
爲了解決let賦值問題的，將一個mutable的變量改成readonly。
let x = "hello"; x = "world"; // 報錯
第一種方式 const
const x = "hello"
第二種方式 "hello"類型
let x: "hello" = "hello"; x = "world"; //
第三種方式 discriminated unions
type Shape =
| { kind: "circle", radius: number }
| { kind: "square", sideLength: number }
function getShapes(): readonly Shape[] {
// to avoid widening in the first place.
let result: readonly Shape[] = [
{ kind: "circle", radius: 100, },
{ kind: "square", sideLength: 50, },
];
return result;
}
第四種方式 as const
.tsx類型文件
// Type '10'
let x = 10 as const;
// Type 'readonly [10, 20]'
let y = [10, 20] as const;
// Type '{ readonly text: "hello" }'
let z = { text: "hello" } as const;
非.tsx類型文件
// Type '10'
let x = <const>10;
// Type 'readonly [10, 20]'
let y = <const>[10, 20];
// Type '{ readonly text: "hello" }'
let z = <const>{ text: "hello" };
優化discriminated unions
function getShapes() {
let result = [
{ kind: "circle", radius: 100, },
{ kind: "square", sideLength: 50, },
] as const;
return result;
}
for (const shape of getShapes()) {
// Narrows perfectly!
if (shape.kind === "circle") {
console.log("Circle radius", shape.radius);
}
else {
console.log("Square side length", shape.sideLength);
}
}
避免將類型推斷爲聯合類型。
避免將類型推斷爲 (boolean | typeof load)[]，而是推斷爲[boolean, typeof load]。
export function useLoading() {
const [isLoading, setState] = React.useState(false);
const load = (aPromise: Promise<any>) => {
setState(true);
return aPromise.finally(() => setState(false));
};
return [isLoading, load] as const; // infers [boolean, typeof load] instead of (boolean | typeof load)[]
}
declare global是什麼意思？
是爲了在全局命名空間作聲明，好比爲對象增長一個未定義的屬性。
爲Window增長csrf的定義
declare global {
interface Window {
csrf: string;
}
}
爲String增長fancyFormat的定義
declare global {
/*~ Here, declare things that go in the global namespace, or augment
*~ existing declarations in the global namespace
*/
interface String {
fancyFormat(opts: StringFormatOptions): string;
}
}
注意global做用域只能用於導出模塊或者外部的模塊聲明
Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.
如何在TypeScript環境增長一個全局變量?
好比咱們想要實現下面的效果，可是會報錯Property '__INITIAL_DATA__' does not exist
<script>
window.__INITIAL_DATA__ = {
"userID": "536891193569405430"
};
</script>
const initialData = window.__INITIAL_DATA__; // 報錯
使用類型斷言
const initialData = (window as any).__INITIAL_DATA__;
type InitialData = {
userID: string;
};
const initialData = (window as any).__INITIAL_DATA__ as InitialData;
const userID = initialData.userID; // Type string
聲明全局變量
declare var __INITIAL_DATA__: InitialData;
const initialData = __INITIAL_DATA__; const initialData = window.__INITIAL_DATA__;
在es模塊中，有import，export的，須要這樣作:
export function someExportedFunction() {
// ...
}
declare global {
var __INITIAL_DATA__: InitialData;
}
const initialData = window.__INITIAL_DATA__;
若是在不少文件都用到的話，能夠用一個globals.d.ts文件。
利用interface合併
interface Window {
__INITIAL_DATA__: InitialData;
}
const initialData = window.__INITIAL_DATA__;
在js模塊中須要像下面這樣：
export function someExportedFunction() {
// ...
}
declare global {
interface Window {
__INITIAL_DATA__: InitialData;
}
}
const initialData = window.__INITIAL_DATA__;
interface能夠繼承嗎？
能夠的。
interface Base {
foo: string;
}
interface Props extends Base {
bar: string
baz?: string
}
const test = (props: Props) => {
console.log(props);
}
test({ foo: 'hello' }) // Property 'bar' is missing in type '{ foo: string; }' but required in type 'Props'
test({ foo: 'hello', bar: 'world' })
當Props繼承了Base以後，實際上它最終變成了下面這樣：
interface Props extends Base {
foo: string;
bar: string
baz?: string
}
Props能夠覆蓋Base嗎？能夠，可是隻能是required覆蓋optional，optional不能覆蓋required。
// ✅
interface Base {
foo?: string;
}
interface Props extends Base {
foo: string;
bar: string
baz?: string
}
// ❌
interface Base {
foo: string;
}
interface Props extends Base {
foo?: string;
bar: string
baz?: string
}
typescript中的&是什麼意思?
在react的dts文件中有這樣一個定義。
type PropsWithChildren<P> = P & { children?: ReactNode };
typescript中的&指的是交叉類型。
interface ErrorHandling {
success: boolean;
error?: { message: string };
}
interface ArtworksData {
artworks: { title: string }[];
}
interface ArtistsData {
artists: { name: string }[];
}
// These interfaces are composed to have
// consistent error handling, and their own data.
type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;
const handleArtistsResponse = (response: ArtistsResponse) => {
if (response.error) {
console.error(response.error.message);
return;
}
console.log(response.artists);
};
知道&是ts中的交叉類型之後，咱們就明白PropsWithChildren的意思了，並且也明白爲何react的函數式組件會比普通函數組件多了children屬性。
它的意思是PropsWithChildren類型是P和對象{children?: ReactNode}的交叉類型，也就是經過&鏈接兩個對象以後，最終生成的對象是擁有children這個可選屬性的。
interface與type的區別是什麼？
An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
An interface can have multiple merged declarations, but a type alias for an object type literal cannot.
- interface能夠繼承（好比用extends），type不能夠
- interface能夠實現有多個合併聲明，type不能夠
enum做爲一種類型是什麼意思？
在閱讀pixi.js的源碼中，發現有將enum做爲了一種類型。
enum也能夠做爲一種類型去約束。
// pixi/constants
export enum BLEND_MODES {
NORMAL = 0,
ADD = 1,
MULTIPLY = 2,
SCREEN = 3,
OVERLAY = 4,
}
export enum ANOTHER_ENUM {
FOO = 5,
BAR = 6
}
import { BLEND_MODES } from '@pixi/constants';
export class Sprite extends Container
{
public blendMode: BLEND_MODES;
constructor(){
this.blendMode = BLEND_MODES.NORMAL; // 最佳
// this.blendMode = 0 這樣是能夠的，次之
// this.blendMode = ANOTHER_ENUM.FOO 這樣ts會報錯
}
}
項目中xxx.d.ts的declare module '*.scss'是什麼意思？declare module還能夠作什麼？
項目中xxx.d.ts的declare module '*.scss'是什麼意思？
// externals.d.ts declare module '*.scss'
默認狀況下import style from 'style.scss'在ts的ide校驗器裏會報錯，那就用d.ts假定定義全部scss結尾的文件是module。--社長
假設將declare module '*.scss'註釋掉，ide會報錯，可是能夠經過lint。
declare module還能夠作什麼？
當咱們引入了一個微軟官方@types/*中不存在的自定義包時，ide會報錯。
例以下面這樣：
如何解決這個報紅的錯誤呢？declare module
// typing.d.ts declare module 'visual-array'
這樣報紅就消失了。
typescript如何約束Promise的類型？
Promise泛型函數
interface Promise<T> {
then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;
catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}
interface foo {
bar: ()=>Promise<string>,
baz: ()=>Promise<number[]>,
car: (id)=>Promise<boolean[]>
}
typescript中的keyof如何使用？
最簡
type Point = { x: number; y: number };
type P = keyof Point; // 'x' | 'y'
let foo: P = 'x';
let bar: P = 'y';
let baz: P = 'z'; // ❌
經常使用
interface Person {
name: string;
age: number;
location: string;
}
type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person }; // string
type P1 = Person["name"]; // string
type P2 = Person["name" | "age"]; // string | number
type P3 = string["charAt"]; // (pos: number) => string
type P4 = string[]["push"]; // (...items: string[]) => number
type P5 = string[][0]; // string
keyof使得函數類型安全（type-safe）
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key]; // Inferred type is T[K]
}
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
obj[key] = value;
}
let x = { foo: 10, bar: "hello!" };
let foo = getProperty(x, "foo"); // number
let bar = getProperty(x, "bar"); // string
let oops = getProperty(x, "wargarbl"); // Error! "wargarbl" is not "foo" | "bar"
setProperty(x, "foo", "string"); // Error!, string expected number
Partial,Required,Readonly,Pick 泛型工具類型的實現原理
type Partial<T> = {
[P in keyof T]? : T[P];
}
type Required<T> = {
[P in keyof T]?- : T[P];
}
type Readonly<T> = {
readonly [P in keyof T] : T[P];
}
type Pick<T, K extends keyof T> = {
[P in K]: T[P]
}
typescript中的typeof如何使用？
js中的typeof主要用於表達式上下文，而ts中的typeof主要用於類型上下文。
let s = "hello"; let n: typeof s; // ^ = let n: string
type Predicate = (x: unknown) => boolean; type K = ReturnType<Predicate>; // ^ = type K = boolean
function f() {
return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;
// ^ = type P = {
// x: number;
// y: number;
// }
typescript中的non-null assert operator是什麼？
非null斷言操做符：當爲null時，發生斷言，拋出異常。
可選鏈：當爲null/undefined時，返回undefined。
非空斷言操做符和可選鏈操做符測試
// Non-Null Assertion Operator
const obj = null;
interface Entity {
name?: string;
}
// 非空斷言操做符
function nonNull(e?: Entity) {
const s = e!.name; // 發生斷言，拋出TypeError
}
try {
nonNull(obj);
} catch (e) {
console.error("nonNull catch", e); // TypeError: Cannot read property 'name' of null
}
// 可選鏈
function optionalChaining(e?: Entity) {
const s = e?.name;
console.log(s); // undefined
}
optionalChaining(obj);
用於函數返回值空檢測
function returnNullFunc() {
return null;
}
try {
returnNullFunc()!.age;
} catch (e) {
console.error("returnNullFunc", e); // TypeError: Cannot read property 'age' of null
}
function returnNonNullFunc() {
return {
age: "18"
};
}
returnNonNullFunc()!.age;
在線demo：https://codesandbox.io/s/non-...
期待和你們交流，共同進步：
- 微信公衆號： 大大大前端 / excellent_developers
- Github博客: 趁你還年輕233的我的博客
- SegmentFault專欄：趁你還年輕，作個優秀的前端工程師
- 掘金帳號：趁你還年輕233
努力成爲優秀前端工程師！
相關文章
- 1. 寫了3個月TypeScript，我學到了什麼？
- 2. 寫了3個月React，我學到了什麼？
- 3. 我在阿里3個月學到了什麼？
- 4. 我在學習編碼的6個月中學到了什麼
- 5. 造個輪子,我學到了什麼
- 6. 四個月技術寫做，我寫了些什麼？
- 7. 四個月技術寫作，我寫了些什麼？
- 8. 《空號》：聊聊我在阿里外包3個月學到了什麼。。。
- 9. 2020我寫了什麼？
- 10. 這兩個多月 寫做爲我帶來了什麼
- 更多相關文章...
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 寫了3個月TypeScript，我學到了什麼？
- 2. 寫了3個月React，我學到了什麼？
- 3. 我在阿里3個月學到了什麼？
- 4. 我在學習編碼的6個月中學到了什麼
- 5. 造個輪子,我學到了什麼
- 6. 四個月技術寫做，我寫了些什麼？
- 7. 四個月技術寫作，我寫了些什麼？
- 8. 《空號》：聊聊我在阿里外包3個月學到了什麼。。。
- 9. 2020我寫了什麼？
- 10. 這兩個多月 寫做爲我帶來了什麼