打字高手 7.6_打字稿3.9：发生了什么变化？

最新推荐文章于 2024-03-03 01:11:37 发布

dfsgwe1231

最新推荐文章于 2024-03-03 01:11:37 发布

阅读量542

点赞数

文章标签： python java vue mysql typescript ViewUI

原文链接：https://hackernoon.com/typescript-39-what-got-changed-ft3f3vbz

版权

打字高手 7.6

嘿! 伙计们，在本文中，我将讨论打字稿3.9带来的更改。我将给出一些代码示例和简短描述。

重大变化

1.解析可选链接和非null断言中的差异

以前的版本：在某些情况下，将可选链接（？）与非空断言（！）结合使用会改变短路的行为（可选链接不再起作用）

现在（3.9）：以上不再发生，代码很直观。

import { ec } from 'easy-console' ;

interface Orders {
  orderDetail?: OrderDetail; // orderDetail: OrderDetail | undefined;
}

interface OrderDetail {
  item?: Item; // item: Item | undefined;
}

interface Item {
  price: number ;
}

const order: Orders = { orderDetail: undefined };


const itemPrice: number = order.orderDetail?.item!.price; //

// Before
ec.l(itemPrice); // trying to access property on undefined

// v3.9
ec.l(itemPrice); //undefined

2.严格检查交叉点和可选属性

以前的版本：使用交集派生的类型可以分配给其他类似的类型，而无需对底层类型属性进行更严格的检查。

现在：使用相交类型时，会对类型进行更严格的检查。因此，如果类型完全不同，它将无法正常工作。

import { ec } from 'easy-console' ;

interface A {
  a: number ; // notice this is 'number'
}

interface B {
  b: string ;
}

interface C {
  a?: boolean ; // notice this is 'boolean'
  b: string ;
}

const x: A & B = { a: 1 , b: `s` };

// Before
const y: C = x; // Type 'number' is not assignable to type 'boolean'.

ec.l( `x>>` , x); // { a: 1, b: `s` }
ec.l( `y>>` , y); // { a: 1, b: `s` }

// 3.9
const y: C = x; // error-  Type 'number' is not assignable to type 'boolean'.

3.严格检查来自不同类型属性的交叉口

之前：具有相同属性但没有重叠类型的类型的交集，对于该特定特定属性，将折叠为永不折叠。

现在：具有相同属性且没有共同点的类型的交集会将整个交集类型折叠为永不。

import { ec } from 'easy-console' ;

interface Category {
  iam : 'categoryType' ;
  categoryName: string;
  level: number;
}

interface Product {
  iam : 'productType' ;
  productName: string;
  productPrice: number;
}

type Group = Category & Product; // 3.9 whole types becomes never

const group: Group = {
  categoryName : 'Laptops' ,
  level : 1 ,
  productName : 'Macbook' ,
  productPrice : 1234 ,
  iAm : "never say never" ,  // in previous version only the particular type becomes
};

// Before
ec.l( 'group.iAm =>' , group); // previous version - error only on 'iAm' property

// 3.9
ec.l( 'group.iAm =>' , group); // version 3.9 - error on all properties

4. }和>现在是无效的JSX文本字符

现在，您不能在.tsx文件中直接使用它们。您将获得以下错误。

Unexpected token. Did you mean`{'>'}` or `&gt;` ?
Unexpected token. Did you mean `{'}'}` or `&rbrace;` ?

5.扩展任何参数的类型参数不再充当任何参数

import { ec } from 'easy-console' ;

function foo < T extends any >( arg: T )  {
  ec.l( 'arg.anyArguments' , arg.IwillNotGiveError); // previous versions no error 
}

function foo < T extends any >( arg: T )  {
  ec.l( 'arg.anyArguments' , arg.IwillGiveError); // 3.9 error 
}

改进措施

1.推理和承诺方面的改进

在某些情况下，当使用Promise.all（）时，promise的响应类型在结果中将不匹配。这会导致编译时错误。这主要是在存在未定义类型时观察到的。在代码框下方找到（在旧版本上）。

2. // @ ts-expect-error注释

它允许您在存在类型错误的地方接受错误。例如。在编写测试的情况下，您故意要传递不同类型的值。

与@ ts-ignore有什么不同？

@ ts-expect-error会在不需要时通知您。

describe('Todo' , () => {

  it( 'sample test' , () => {
    function expectErr ( a: string )  {
      expect(a).toBe( 'string' );
    }

    // @ts-expect-error
    expectErr( 1 );    // no error

    // @ts-expect-error
    expectErr( "a" );  // error

  });
});

3.条件表达式中的未调用函数检查（？:)

在以前的版本中，typescript会进行检查，以确定是否在使用条件（例如其他条件）时调用了函数。但不能使用条件运算符（？:)。但现在它支持相同。

function hasImportantPermissions (): boolean  {
    // ...
}

// Oops!
if (hasImportantPermissions) {
//  ~~~~~~~~~~~~~~~~~~~~~~~
// This condition will always return true since the function is always defined.
// Did you mean to call it instead?
    deleteAllTheImportantFiles();
}

4. Typescript现在支持“解决方案样式” tsconfig.json文件

您可以在一个文件中定义多个tsconfig，而不是放在单个目录结构中。

// tsconfig.json
{
    "files" : [],
    "references" : [
        { "path" : "./tsconfig.shared.json" },
        { "path" : "./tsconfig.frontend.json" },
        { "path" : "./tsconfig.backend.json" },
    ]
}

5.其他小改进