プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • TypeScript
  • 【TypeScript】「as」、「any」、「?」、「!」、「型の互換性」、「アサーショ…
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【TypeScript】「as」、「any」、「?」、「!」、「型の互換性」、「アサーション」について

05.22

  • miyabisan2
  • コメントを書く

この記事は2分で読めます

as、any

TypeScriptが提供する型安全を否定する行為であり基本的に使ってはいけない。

anyやasを使って良いケース

TypeScriptのコンパイルが完璧ではなく使用を余儀なくされるケースがある。

?(Optional Chaining)

オブジェクト(配列も含む)の場合しか使用できない。

オブジェクトや配列ががnullやundefinedの場合にキーにアクセスしようとした際に、undefinedを返してくれます。

1
2
3
console.log(obj?.prop); // ドット表記法
console.log(obj?.['expr']); // ブラケット表記法
console.log(array?.[0]); // 配列のインデックスアクセス

これを「Optional Chaining」と呼びます。

!

NULLじゃないと言い切る文法。NonNullAssertionOperatorというTypeScript2.0から登場した機能でどんな型にも使える。

1
2
const test = function(); // functionはstring | undefinedを返す関数。
test!

変数の後につけると「string | undefined」とかの場合はstringとかにキャストしてくれる。

ただ、使用するとeslintで下記のエラーが出る。

1
warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion

もし、!を使用する場合はeslintの解除を行う。

1
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion

型の互換性

TypeScriptにおいてある型を他の型に代入する事が可能かどうかという概念のことです。例えば下記のようにany型にはstring型を代入する事が可能です。

1
2
3
let a: any = 'テスト';
let b: string = 'テスト2';
a = b;

クラスの代入について

メンバーのデータ型に互換性があるかどうかをチェックしています。もし互換性がない場合はエラーになります。(なお、クラスに定義されているインターフェイス等は全く考慮はしません。あくまで代入される側と代入する側の内部で持っているメンバのデータ型のチェックになります。)

アサーション

型アサーション

例えば、下記のように記述した場合にbは数値が代入されていますが、普通にその後の文字列の代入も可能になってしまいます。

1
2
3
let a: any = 'テスト';
let b = a.length;
b = 'あ';

下記のように「変数 as データ型」とする事で型変換して異なるデータ型代入時にエラーとする事が可能です。これを型アサーションと呼びます。

1
2
3
let a: any = 'テスト';
let b = (a as string).length;
b = 'あ'; //エラーになる。

なお、下記のように記述することも可能ですが、これはReactの一部の文法と似ているため非推奨とされています。

1
2
3
let a: any = 'テスト';
let b = (<string>a).length;
b = 'あ'; //エラーになる。

スポンサーリンク
  • 2021 05.22
  • miyabisan2
  • コメントを書く
  • TypeScript
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2020 04.19

    【TypeScript】「never型」や「void型」、「Object型」、「インデックスシグネチャ」

  2. 2021 12.26

    【TypeScript】「ESlint」の初期設定コマンド

  3. 2020 04.13

    【TypeScript】基本

  4. 2022 01.08

    【TypeScript】「オーバーロード」について

  5. 2021 02.28

    【typescript】「Partial」、「Required」、「Readonly」について

  6. 2020 04.13

    【TypeScript】「変数」、「定数」、「データ型」、「型推論」、「配列」

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【Next.js】「CSR(UseSWR)」について

【React/Redux】「Redux Tool Ki…

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • cursor
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー