Type Script에서 자주 볼 수 있는?「!」너랑 친해지고 싶어.

안녕하세요, iCARE 전단 엔지니어oreo입니다.
우리 회사의 앞머리는 Vue다.js, TypeScript를 사용하여 개발 중입니다.어떤 PR에서 다음과 같은 평을 받았다.
팩스 할 때는 신경 쓰는데 필요 없는 곳에서?제가 봤는데 위에 쓰여있어요.모든 as는 위험한 코드로 시청자들에게 큰 부담을 줄 수 있으니 필요한 곳에만 두도록 주의하세요
지금까지 ？와！ 모두 마음대로 사용했기 때문에 그들의 행동을 정리하고 싶습니다!

? 정보

옵션 매개 변수(신속성 63;)

개요

매개변수에 옵션 매개변수를 추가하면 매개변수를 생략할 수 있습니다.예 1.1에서 test()를 실행하면 욕Expected 1 arguments, but got 0.을 먹지만 선택할 수 있는 매개 변수(예 1.2)를 추가하면 욕을 먹지 않는다.

//例1.１
const test = (x:number,y:number):void=>{
  console.log(x);
};
test(1);　//エラー　Expected 2 arguments, but got 1.

//例1.２
const test = (x:number,y?:number):void=>{
  console.log(x);
}
test(1);  //OK

주의점

예시 1. 2에서 선택할 수 있는 파라미터를 사용할 때 파라미터 y는 number | undefined의 연합형으로 식별된다.

또한 선택할 수 있는 매개 변수는 매개 변수의 마지막에 써야 한다(예를 들어 1.3).

//例1.3
const test = (x?:number,y:number):void=>{
  console.log(x,y);
};

//エラー　A required parameter cannot follow an optional parameter.

보충: Typlam

👇이런 쓰기 방법도 옵션 매개 변수에 기본값을 줄 수 있다.또한 기본 매개 변수는 매개 변수의 마지막에 쓰지 않아도 된다.

//例1.4
const test = (x: number, y = 3): void => {
  console.log(x+y);
  console.log(x);
};

test(1); //OK

// console.log(x+y)は4と出力
// console.log(x)は1と出力

유혹적 도전

개요

Type Script의 3.7 이후에 사용할 수 있습니다.null 또는 undefien의 속성.에서 참조할 때 오류가 발생하고(예 2.1) 사용할 경우?. 오류가 발생하지 않으며undefiend 되돌아갑니다(예 2.2).

//例2.1
type Address = {
      prefecture: {
        name: string
        city?: {
          name: string
        }
      }
    }
    
const address: Address = {
      prefecture: {
        name: 'tokyo',
      },
    }
const targetAddress = address.prefecture.city.name //エラー　Object is possibly 'undefined'.
console.log(targetAddress)

//例2.2
type Address = {
      prefecture: {
        name: string
        city?: {
          name: string
        }
      }
    }
const address: Address = {
      prefecture: {
        name: 'tokyo',
      },
    }
const targetAddress = address.prefecture.city?.name //OK
console.log(targetAddress)

주의점

?. 사용 시 단거리 평가를 실시한다.단락 평가에서?. 왼쪽이 null 또는undefiend일 경우 오른쪽은 평가(집행)를 하지 않는다.

Null 합체 산수

개요

Type Script의 3.7 이후에 사용할 수 있습니다.왼쪽이 ?? 또는 null라면 오른쪽의 값으로 돌아가고 그렇지 않으면 왼쪽의 값으로 돌아간다(예3.1).

//例3.1
const name = null ?? 'Yamada Taro';
console.log(name);
//  'Yamada Taro'が出力

주의점

undefiend는 OR 연산자??와 달리 || 또는 null 이외의 가짜 값(예를 들어 undefiend이면 왼쪽 값으로 돌아간다.

//例3.2 OR演算子
const age = 0 || 18;
console.log(age);
// 18が出力

//例3.3　Null合体演算子
const age = 0 ?? 18;
console.log(age);
// 0が出力

빈 합체 대입 연산자("")

개요

Type Script 4.0 이후에 사용할 수 있습니다.왼쪽이 0 또는 ??= 시대입(예4.1)이다.

//例4.1
const pilot = { name: null };

pilot.name ??= "shinji";
console.log(pilot.name); //shinjiが出力

//例4.2 
const pilot = { name: "shinji" };

pilot.name ??= "asuka";
console.log(pilot.name); //shinjiが出力。asukaが代入されない。

예 4.3의 2행 결과는 같다.

const pilot = { name: null };

//例4.3
pilot.name ??= "shinji"; //Null合体代入演算子
pilot.name = pilot.name ?? "shinji"; //Null合体演算子

주의점

왼쪽이 null 또는 undefiend 이외의 가짜 값(예: null이면 대입되지 않습니다.

//例4.4
const pilot = { age: 0 };
pilot.age ??= 14; 
console.log(pilot.age) //0が出力

undefiend 정보

Null 할당 연산자 없음("")

개요

null 허용형(0 또는 !에 대해서는 비null 결단!을 사용하면 컴파일러에서 이 유형이 T | null이 아니라 T | null | undefiend임을 명확하게 나타낼 수 있다.

//例5.1
type Dog = { name: string };
const mydog = { name: "sora" };

const getDog = (dog?: Dog) => {
  console.log(dog.name); //エラー　Object is possibly 'undefiend'
};
getDog(mydog);

//例5.2
type Dog = { name: string };
const mydog = { name: "sora" };

const getDog = (dog?: Dog) => {
  console.log(dog!.name); //OK
};
getDog(mydog);

주의점

강제적이지 않음!이 명확해 유형의 변화에 주의하지 않을 수 있으므로 기본적으로 사용하지 않는 것이 좋다.

명확하게 결단을 내리다

개요

예제 6.1에서 보듯이 변수가 값을 할당하지 않은 경우(Type Script를 정적으로 감지할 수 없는 경우) 이 변수를 사용하면 격노할 수 있습니다.그러나 T를 사용하면 컴파일러에서 변수를 사용하기 전에 이 변수를 지정한 값을 명확하게 나타낼 수 있다.

//例6.1
let name: string;

const addName = (val: string) => {
  name = val;
};
addName("shinji");

console.log(name); //エラー Variable 'name' is used before being assigned.

//例6.2
let name!: string;

const addName = (val: string) => {
  name = val;
};
addName("shinji");

console.log(name); //OK

주의점

코드 변경 등으로 변수가 할당된 경우가 부주의해지면서 이쪽도 기본적으로 잘 사용하지 않는 게 좋다.

최후

다시 정리하여 머리를 정리하였다.null | undefiend,!는 매우 편리하지만 그 위험성(유형의 변화 등에 주의)을 충분히 이해한 토대에서 사용해야 한다.또한 팀원들 사이에서!,?에 대한 이해도 마찰과 인코딩 규칙의 명확화도 중요하다.

참고 자료

주식회사 Oraly Japan "프로그래밍 Type Script"
https://typescript-jp.gitbook.io/deep-dive/
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators
https://qiita.com/uhyo/items/6cd88c0ea4dc6289387a